<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box" :style="{ opacity: data.xData.length == 0 ? '0' : '1' }"></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="data.xData.length == 0"></Nodata>
  </div>
</template>

<script>
  import fontSize from "@/utils/fontSize";
  // const elementResizeDetectorMaker = require("element-resize-detector");
  export default {
    watch: {
      // data: "drawLine", // 数值变化是更新图表
      yName: "drawLine", // 数值变化是更新图表
      gridTop: "drawLine", // 数值变化是更新图表
      gridBottom: "drawLine", // 数值变化是更新图表
      yAxisNameTop: "drawLine", // 数值变化是更新图表
      yUnit: "drawLine", // 数值变化是更新图表
      color: "drawLine", // 数值变化是更新图表
      extraLegend: "drawLine", // 数值变化是更新图表
      splitNumber: "drawLine", // 数值变化是更新图表
      gridRight: "drawLine", // 数值变化是更新图表
      areaStyleOpcity: "drawLine", // 数值变化是更新图表
    },
    data: {
      // 对对象进行深度监听
      handler(nv) {
        this.drawLine();
      },
      immediate: true,
      deep: true,
    },
    props: {
      data: {
        type: [Object, Array],
        default: function () {
          return {
            // xData: ['标题1', '标题2', "标题3", "标题4"],
            // yData: [{ name: '数据1', data: [1200, 2100, 1391, 1400] },
            // { name: '数据2', data: [300, 200, 2300, 1400] }],
            // xData: [],
            // yData: [],
          };
        },
      },
      areaStyleOpcity: {
        type: [String, Number],
        default: 0.3,
      },
      color: {
        type: Array,
        default: function () {
          return []
        },
      },
      yUnit: {
        type: String,
        default: "",
      },
      yName: {
        type: String,
        default: "",
      },
      splitNumber: {
        type: [String, Number],
        default: 2,
      },
      gridTop: {
        type: String,
        default: "22%",
      },
      yAxisNameTop: {
        type: [String, Number],
        default: 0,
      },
      gridBottom: {
        type: String,
        default: "3%",
      },
      gridRight: {
        type: String,
        default: "15%",
      },
      extraLegend: {
        type: Object,
        default: () => ({})
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        try {
          this.$nextTick(() => {
            let myChart = this.$echarts.init(this.$refs.echarts_box);
            let colorArr = [
              "rgba(51, 149, 255,",
              "rgba(1, 251, 246,",
              "rgba(242, 189, 66,",
              "rgba(217, 80, 64,",
              "rgba(49,169,255,",
              "rgba(255,35,35,",
              "rgba(255,159,45,",
              "rgba(255,255,0,",
              "rgba(0,235,168,",
              "rgba(25,193,255,",
              "rgba(234,56,255,",
              "rgba(255,56,159,",
              "rgba(255,84,0,",
              "rgba(164,255,45,",
              "rgba(0,255,36,",
            ];
            colorArr.unshift(...this.color)
            let series = [];
            for (let i in this.data.yData) {
              let obj = {
                name: this.data.yData[i].name,
                data: this.data.yData[i].data,
                type: "line",
                symbol: "circle",
                splitNumber: 5,
                scale: true,

                symbolSize: 5,
                // 展示曲线上的点
                showSymbol: true,
                // 让曲线更加圆滑
                smooth: true,
                itemStyle: {
                  normal: {
                    color: colorArr[i] + "1)",
                    shadowColor: colorArr[i] + "0.7)",
                    // shadowBlur: 10,
                    borderColor: colorArr[i] + "1)",
                    borderWidth: 3,

                    lineStyle: {
                      width: 2,
                      borderColor: colorArr[i] + "1)",
                      color: colorArr[i] + "1)",
                    },
                  },
                },

                areaStyle: {
                  // opacity: 0.4,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[i] + this.areaStyleOpcity+")",
                    },
                    {
                      offset: 1,
                      color: colorArr[i] + "0)",
                    },
                  ]),
                },
              };
              series.push(obj);
            }
            let option = {
              grid: {
                top: this.gridTop,
                left: "2%",
                right: this.gridRight,
                bottom: this.gridBottom,
                containLabel: true,
              },
              tooltip: {
                confine: true,
                trigger: "axis",
                backgroundColor: "rgba(0,74,174,0.9)", //设置背景颜色
                textStyle: {
                  color: "rgba(255,255,255,1)", //设置文字颜色
                  // fontFamily: "PingFang SC",
                  fontSize: fontSize.fontSize(18),
                },
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: "line", // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              legend: {
                orient: "vertical",
                right: "0%",
                top: "center",
                // itemWidth: 5,
                // itemHeight: 14,
                // icon: "react",
                // itemGap: 17,

                // align: "right",
              
                textStyle: {
                  color: "rgba(255,255,255,1)",
                  fontSize: fontSize.fontSize(17),
                  // fontFamily: "PingFang SC",
                },
                ...this.extraLegend
              },
              xAxis: {
                data: this.data.xData,
                boundaryGap: true,
                axisLine: {
                  show: true,
                  // symbol: ["none", "rect"],
                  // symbolSize: [6, 12],
                  lineStyle: {
                    width: 1,
                    color: "rgba(193,240,254,0.1)",
                  },
                },
                axisLabel: {
                  // fontFamily: "PingFang SC",
                  color: "rgba(255,255,255,1)",
                  fontSize: fontSize.fontSize(18),
                },
                axisTick: {
                  show: false,
                },
              },
              yAxis: {
                splitNumber: this.splitNumber,
                name: this.yName,
                // inverse: true,
                position: "left",
                nameTextStyle: {
                  color: "rgba(255,255,255,1)",
                  // fontFamily: "PingFang SC",
                  // fontWeight: 400,
                  fontSize: fontSize.fontSize(18),
                  padding: [0, 40, this.yAxisNameTop, 0],
                  // verticalAlign: "bottom"
                },
                axisLabel: {
                  color: "rgba(255,255,255,1)",
                  // fontFamily: "PingFang SC",
                  fontSize: fontSize.fontSize(18),
                  formatter: `{value} ${this.yUnit}`, //右侧Y轴文字显示
                },
                axisLine: {
                  show: false,
                  // symbol: ["none", "rect"],
                  // symbolSize: [6, 12],
                  lineStyle: {
                    width: 2,
                    color: "rgba(193,240,254,0.5)",
                  },
                },
                axisTick: {
                  show: false,
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(83, 125, 170, 0.2)",
                  },
                },
              },
              series: series,
            };

            myChart.setOption(option);
            /* 大小自适应 */
            window.addEventListener("resize", () => {
              // h = this.$refs.echarts_box.offsetHeight;
              // console.log(h);
              myChart.resize();
            });
            myChart.resize();
          });
        } catch (e) {
          console.error(e);
          // 错误处理代码片段
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .echarts_box {
    width: 100%;
    height: 100%;
    position: relative;

    .Nodata {
      position: absolute;
      top: 0;
      z-index: 10;
    }
  }
</style>